<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>home</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/common.css">
  <script src="js/src.js"></script>
  <style>
    .tablebar a:nth-of-type(1) {
      color: #128bed;
    }

    /* 轮播图 */
    .el-carousel .el-image {
      height: 100%;
    }

    /* card */
    .homecard {
      background: #fff;
      border: 12px solid #F5F5F5;
      padding: 12px;
    }

    .homecard .el-image {
      height: 120px;
    }

    .card_title {
      font-size: 18px;
      font-weight: bold;
      line-height: 36px;
    }

    .card_bottom {
      margin-top: 12px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <el-carousel height="150px">
      <el-carousel-item v-for="(item,index) in 3" :key="item">
        <el-image :src="'./image/banner' + index + '.jpg'"></el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="homecard" v-for='(item,index) in arra' :key='index'>
      <p class="card_title">{{item.title}}</p>
      <el-image :src="'./image/banner' + index + '.jpg'"></el-image>
      <el-progress :percentage="item.progress" style="margin-top: 12px;"></el-progress>
      <div class="card_bottom">
        <div>完成:<span style="color: red;font-weight:bold;">{{item.wc}}</span></div>
        <div>目标:<span style="color: red;font-weight:bold;">{{item.mb}}</span></div>
        <el-button type='danger' size='mini'>支持</el-button>
      </div>
    </div>
    <div style="height: 60px;"></div>
    <div class="tablebar">
      <a>
        <i class="el-icon-s-home"></i>
        <p>首页</p>
      </a>
      <a>
        <i class="el-icon-film"></i>
        <p>项目</p>
      </a>
      <a>
        <i class="el-icon-chat-line-round"></i>
        <p>动态</p>
      </a>
      <a href="./login.html">
        <i class="el-icon-s-custom"></i>
        <p>我</p>
      </a>
    </div>
  </div>
</body>
<script>
  //实例化一个Vue对象
  var vm = new Vue({
    el: "#app",
    data: {
      arra: [{
        title: '标题1',
        progress: 0.38,
        wc: '0.38%',
        mb: '200000.00'
      }, {
        title: '标题2',
        progress: 52,
        wc: '52%',
        mb: '100000.00'
      }, {
        title: '标题3',
        progress: 10,
        wc: '10%',
        mb: '50000.00'
      }]
    },
    mounted() {
    },
    methods: {
    }
  });

</script>

</html>